﻿function inudclick(e) {
    var tis = $(this);
    var $ipt = tis.parent().children("input");
    var min = parseInt($ipt.attr("min")); if (!min) min = 1;
    var max = parseInt($ipt.attr("max")); if (!max) max = 999999;
    var value = parseInt($ipt.val());
    if (tis.index() == 0) value--; else value++;
    if (value <= min || value >= max) tis.css("pointer-events", "none").css("background-color", "rgb(250,250,250)");
    else $(".input-nud button").css("background-color", "white").css("pointer-events", "initial");
    $ipt.val(value).change();
}

function inudchange() {
    var value = parseInt($(this).val());
    var min = parseInt($(this).attr("min")); if (!min) min = 1;
    var max = parseInt($(this).attr("max")); if (!max) max = 999999;
    if (!value || value < min) $(this).val(min);
    if (value > max) $(this).val(max);
    if (value > min && value < max) $(".input-nud button").css("background-color", "white").css("pointer-events", "initial");
}

function bindInputNudEvent(tag) {
    $(tag).children("button").click(inudclick);
    $(tag).children("input").change(inudchange);
}

//圆形进度条控件
function bindCircleProgbar() {
    var progs = $(".circleProgbar");
    progs.on("selectstart", function () { return false; });
    progs.each(function (index, elm) {
        let prog = $(elm);
        //获取属性
        var fore = prog.attr("forecolor");
        var bg = prog.attr("bgcolor");
        var value = prog.attr("value");
        var barw = prog.attr("bar-width");
        var tit = prog.attr("title");
        if (!bg) bg = "#e0e0e061";
        if (!fore) fore = "orange";
        if (!barw || barw <= 0) barw = 20;
        if (!value || value < 0) value = 0;
        value = parseFloat(value).toFixed(2);

        prog.html(`
        <div class="content">
            <p class="title">${tit}</p>
            <p class="value">${value}%</p>
        </div>
        <div class="wrapper right">
            <div class="progress rightcircle"></div>
        </div>
        <div class="wrapper left">
            <div class="progress leftcircle"></div>
        </div>`);


        //设置背景色
        if (bg) {
            prog.find(".progress").css("border-color", bg);
        }
        //设置前景颜色
        if (fore) {
            prog.find(".rightcircle").css({
                "border-top-color": fore,
                "border-right-color": fore
            });
            prog.find(".leftcircle").css({
                "border-bottom-color": fore,
                "border-left-color": fore
            });
            prog.find(".content").find(".value").css("color", fore);
        }
        //赋值进度条宽度
       prog.find(".progress").css("border-width", barw + "px");

        //赋值进度
        var deg = 360 * (value / 100);
        var rdeg = -135 + deg;
        var ldeg = -135 + (deg - 180);
        if (rdeg > 45) rdeg = 45;
        if (rdeg < -135) rdeg = -135;
        if (ldeg > 45) ldeg = 45;
        if (ldeg < -135) ldeg = -135;
        anime({
            targets: prog.find(".rightcircle")[0],
            rotate: [-135, rdeg],
            easing: "linear",
            delay: 500
        });
        var dur = 20 * (value - 50);
        anime({
            targets: prog.find(".leftcircle")[0],
            rotate: [-135, ldeg],
            easing: "linear",
            delay: 1500,
            duration: dur
        });
    })
}

$(function () {
    //数字调节控件
    var el = $(".input-nud")[0];
    if (el) {
        //取消全局鼠标选中以及拖功能
        el.ondrag = () => false;
        el.onselectstart = () => false;
        el.ondragstart = () => false;
    }
    $(".input-nud button").click(inudclick);
    $(".input-nud input").change(inudchange);

})

